<template>
  <div class="container">
    <div class="container-content">
      <vab-query-form>
        <vab-query-form-top-panel>
          <el-form
            :inline="true"
            label-width="80px"
            :model="tableOptions.queryForm"
            style="width: 100%"
          >
            <el-row :gutter="10">
              <el-col :span="5">
                <el-form-item label="表单名称">
                  <el-input
                    v-model="tableOptions.queryForm.formName"
                    placeholder="表单名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="状态">
                  <DictSelect
                    :default-value="tableOptions.queryForm.formStatus"
                    dict-code="1002"
                    show-all="Y"
                    @change="handleStatusChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    icon="refresh-left"
                    type="warning"
                    @click="handleResetQuery"
                  >
                    重置
                  </el-button>
                  <el-button
                    icon="search"
                    type="primary"
                    @click="queryTableData"
                  >
                    查询
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </vab-query-form-top-panel>

        <vab-query-form-left-panel :span="24">
          <el-button icon="circle-plus" type="primary" @click="handleAdd">
            添加
          </el-button>
          <el-button icon="remove" type="danger" @click="handleDelete">
            批量删除
          </el-button>
        </vab-query-form-left-panel>
      </vab-query-form>

      <el-table
        ref="tableRef"
        v-loading="tableOptions.loading"
        border
        stripe
        :data="tableOptions.dataList"
        :height="tableOptions.height"
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          label="表单名称"
          prop="formName"
          sortable
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          align="center"
          label="表单简码"
          prop="formCode"
          sortable
          show-overflow-tooltip
          width="160"
        />
        <el-table-column
          align="center"
          label="状态"
          prop="formStatusDesc"
          width="80"
        >
          <template #default="{ row }">
            <el-tag :type="row.formStatus === '0' ? 'success' : 'info'">
              {{ row.formStatusDesc }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="表单设计"
          prop="formInfo"
          width="120"
        >
          <template #default="{ row }">
            <el-tag v-if="row.formInfo" type="success">已完成</el-tag>
            <el-tag v-else type="info">未完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="备注"
          prop="formRemark"
          show-overflow-tooltip
          width="160"
        />
        <el-table-column
          align="center"
          label="创建人"
          prop="createUserName"
          width="100"
        />
        <el-table-column
          align="center"
          :formatter="datetimeFormat"
          label="创建时间"
          prop="createTime"
          width="160"
        />
        <el-table-column
          align="center"
          :formatter="datetimeFormat"
          label="最后修改时间"
          prop="updateTime"
          width="160"
        />
        <el-table-column
          align="center"
          border
          fixed="right"
          label="操作"
          width="280"
        >
          <template #default="{ row }">
            <el-button size="small" type="warning" @click="handleEdit(row)"
              >修改</el-button
            >
            <el-button size="small" type="danger" @click="handleDelete(row)"
              >禁用/启用</el-button
            >
            <el-button size="small" type="primary" @click="handleDesign(row)"
              >设计</el-button
            >
            <el-button
              :disabled="row.formInfo ? false : true"
              size="small"
              type="success"
              @click="handleRender(row)"
            >
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="tableOptions.pagination.current"
        :layout="tableOptions.pagination.layout"
        :page-size="tableOptions.pagination.size"
        :total="tableOptions.pagination.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <FormEdit ref="formEditRef" width="60%" @confirm="queryTableData" />
      <FormPreviewDialog ref="formPreviewDialogRef" width="60%" type="config" />
      <CommonDialog
        v-model="designerVisible"
        :border="true"
        fullscreen
        :show-footer="false"
        :show-header="false"
        @cancel="
          designerVisible = false;
          queryTableData();
        "
        @closed="
          designerVisible = false;
          queryTableData();
        "
      >
        <ConfigFormDesignerPanel
          fullscreen
          v-model:formModel="formData"
          @closed="designerVisible = false"
        />
      </CommonDialog>
    </div>
  </div>
</template>
<script setup name="ConfigForm">
import { useMessage, useMessageBox } from "@/hooks/message";
import { datetimeFormat } from "@/utils/common";
import { cloneObject } from "@/utils/common";
import FormPreviewDialog from "@/components/formPreviewDialog.vue";
import ConfigFormDesignerPanel from "./ConfigFormDesignerPanel.vue";
import FormEdit from "./components/formEdit.vue";
import DictSelect from "@/components/dictSelect.vue";
import {
  queryTable,
  updateObj,
  deleteObjs
} from "@/api/admin/system/configform";
import { querySystemTreeNode } from "@/api/admin/system/systemtree";
import { useTable } from "@/hooks/table";
import { useTree } from "@/hooks/tree";

const formEditRef = ref(null);
const formPreviewDialogRef = ref(null);
const tableRef = ref(null);
const designerVisible = ref(false);

const formData = ref({
  id: "",
  formName: "",
  formRemark: "",
  formStatus: "0",
  formInfo: ""
});

const tableOptions = reactive({
  queryForm: {
    formName: "",
    formStatus: "0"
  },
  autoLoad: true,
  queryFunction: queryTable,
  ascs: ["form_code"]
});

const {
  tableStyle,
  queryTableData,
  handleSelectionChange,
  handleResetQuery,
  handleRowClick,
  handleSizeChange,
  handleCurrentChange,
  handleSortChange
} = useTable(tableOptions, tableRef);

const treeOptions = reactive({
  queryForm: { treeCode: "form" },
  props: {
    children: "children",
    label: "text"
  },
  queryFunction: querySystemTreeNode
});

const { queryTreeData } = useTree(treeOptions);

const handleNodeClick = data => {
  if (data.nodeCode) {
    tableOptions.queryForm.formTypeCode = data.nodeCode;
  }
  queryTableData();
};

const handleAdd = () => {
  formEditRef.value.show();
};

const handleEdit = row => {
  formEditRef.value.show(row);
};

const handleDesign = row => {
  cloneObject(formData.value, row);
  designerVisible.value = true;
};

const handleRender = row => {
  if (row.formInfo) {
    formPreviewDialogRef.value.show(row);
  } else {
    useMessage().warning("表单未完成设计,不能预览");
  }
};

const handleDelete = async row => {
  if (row && row.id) {
    updateObj({
      id: row.id,
      formStatus: row.formStatus === "1" ? "0" : "1"
    }).then(res => {
      if (res.code === 200) {
        useMessage().success("保存成功");
        queryTableData();
      } else {
        useMessage().warning(res.msg);
      }
    });
  } else {
    if (tableOptions.dataSelections.length > 0) {
      const ids = tableOptions.dataSelections.map(item => item.id).join();
      useMessageBox()
        .confirm("删除的表单将无法恢复，是否继续")
        .then(async () => {
          deleteObjs(ids).then(res => {
            if (res.code === 200) {
              useMessage().success("删除成功");
              queryTableData();
            } else {
              useMessage().warning(resmsg);
            }
          });
        });
    } else {
      useMessage().warning("未选中任何行");
    }
  }
};

const handleStatusChange = val => {
  tableOptions.queryForm.formStatus = val;
};
</script>

<style lang="scss" scoped></style>
